/* flex */
.f-inline-flex {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display:         inline-flex;
}
.f-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
}
.f-flex-wrap {
    /*超出换行*/
    -webkit-box-lines: multiple;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
}
.f-flex-h,
.f-flex-row {
    /*水平方向*/
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;

    -webkit-flex-direction: row;
            flex-direction: row;
}
.f-flex-v,
.f-flex-col {
    /*垂直方向*/
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;

    -webkit-flex-direction: column;
            flex-direction: column;
}
.f-flex-hr,
.f-flex-row-r {
    /*水平反向*/
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-box-pack: end;

    -webkit-flex-direction: row-reverse;
            flex-direction: row-reverse;
}
.f-flex-vr,
.f-flex-col-r {
    /*垂直反向*/
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-box-pack: end;

    -webkit-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
.f-flex-1 {
    /*自动伸缩*/
    -webkit-box-flex: 1;

    width: 0;

    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
}
.f-hc {
    /*水平居中*/
    -webkit-box-pack: center;

    -webkit-justify-content: center;
            justify-content: center;
}
.f-sb {
    /*两端对齐，水平垂直受显示方向影响*/
    -webkit-box-pack: justify;

    -webkit-justify-content: space-between;
            justify-content: space-between;
}
.f-fe {
    /*右对齐*/
    -webkit-box-pack: flex-end;

    -webkit-justify-content: flex-end;
            justify-content: flex-end;
}
.f-vt {
    /*垂直居顶*/
    -webkit-box-align: start;

    -webkit-align-items: flex-start;
            align-items: flex-start;
    -ms-flex-align: start;
}
.f-vc {
    /*垂直居中*/
    -webkit-box-align: center;

    -webkit-align-items: center;
            align-items: center;
    -ms-flex-align: center;
}
.f-vb {
    /*垂直居底*/
    -webkit-box-align: end;

    -webkit-align-items: flex-end;
            align-items: flex-end;
    -ms-flex-align: end;
}
